<template>
  <div>
    hello info component
    <button type="button" @click="add()">添加</button>
    <ul>
        <li v-for="(item, index) in items"
            @click="choose(index)"
            :class="{active: index==current && current !== ''}"
            :key="index">
            {{item}}
        </li>
    </ul>
    <button type="button" @click="add2()">添加2</button>
    <ul><li v-for="(item, index) in targets" :key="index">{{item}}</li></ul>
  </div>
</template>

<script>
import store from '@/store'
export default {
  name: 'Info',
  store,
  data () {
    return {
      current: '',
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      targets: []
    }
  },
  mounted () {
    window.vue = this
  },
  methods: {
    choose (index) {
      console.log(index)
      this.current = index
    },
    add () {
      console.log('add Event from info!')
      store.commit('increase')
    },
    add2 () {
      if (this.current !== '') {
        this.targets.push(this.items[this.current])
        this.current = ''
      }
    },
    output () {
      console.log('in output')
    }
  }
}
</script>

<style scoped>
li.active {background:green}
</style>
